<template>
  <page-layout>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div>
        <a-form @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="6">
              <a-form-item label="商品名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input style="width:100%;" placeholder="请输入商品名称" v-model="queryParam.goodsName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6">
              <a-form-item label="价格区间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number style="width:40%;" placeholder="最低价" :min="0" v-model="queryParam.minPrice"></a-input-number>&nbsp;-
                <a-input-number style="width:40%;" placeholder="最高价" :min="0" v-model="queryParam.maxPrice"></a-input-number>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6">
              <a-form-item label="上架状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <z-dict-select-tag  v-model="queryParam.onlineFlag" placeholder="请选择上架状态" dictCode="onlineStat"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6">
              <a-form-item style="float: right">
                <a-button type="primary" @click="searchQuery()" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!-- table区域-begin -->
      <div>
        <vxe-grid
            id="GoodsList"
            keep-source
            ref="vxeTable"
            :height="null"
            v-bind="options"
            @page-change="handlePageChange"
        >
          <template #action="{ row }">
            <template>
              <a @click="handleEdit(row)">编辑</a>
              <a-divider type="vertical" />
              <a-dropdown>
                <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a-popconfirm title="确定要上架吗?" @confirm="() => handleUp(row)">
                      <a>上架</a>
                    </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm title="确定要下架吗?" @confirm="() => handleDown(row)">
                      <a>下架</a>
                    </a-popconfirm>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="handleDetail(row)">详情</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a-popconfirm title="确定要删除吗?" @confirm="() => handleDelete(row.id)">
                      <a>删除</a>
                    </a-popconfirm>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>
          </template>
        </vxe-grid>
      </div>
      <!-- table区域-end -->
      <GoodsModal @ok="modalFormOk" ref="modalForm" />
    </a-card>
  </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout'
import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import GoodsModal from './modules/GoodsModal'
import { putAction } from '@/services/manage'
export default {
  name: 'GoodsList',
  components: {
    GoodsModal,
    PageLayout,
    ZDictSelectTag
  },
  mixins: [VxeTableMixin],
  data() {
    return {
      columns: [
        {
          title: '商品编码',
          field: 'goods',
          showOverflow: true
        },
        {
          title: '商品名称',
          field: 'goodsName',
          showOverflow: true
        },
        {
          title: '商品分类',
          field: 'goodsType',
          formatter: 'dictText',
          showOverflow: true
        },
        {
          title: '价格',
          field: 'price',
          showOverflow: true
        },
        {
          title: '销量',
          field: 'salesNum',
          showOverflow: true
        },
        {
          title: '联系人',
          field: 'contacts',
          showOverflow: true
        },
        {
          title: '电话',
          field: 'phone',
          showOverflow: true
        },
        {
          title: '上架状态',
          field: 'onlineFlag',
          formatter: 'dictText',
          showOverflow: true
        },
        {
          title: '操作',
          slots: { default: 'action' },
          width: 250,
          fixed: 'right'
        }
      ],
      url: {
        list: '/doc/goods/v1/page',
        edit: '/doc/goods/v1/edit',
        delete: '/doc/goods/v1/remove/'
      },
      // 查询参数
      queryParam: {
      },
      customTableToolbar: {
        export: false,
        import: false
      }
    }
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  methods: {
    handleUp(row) {
      row.onlineFlag = '10'
      putAction(this.url.edit, row).then(res => {
        if (res.success) {
          this.$message.success('上架成功')
          this.loadData()
        }
      })
    },
    handleDown(row) {
      row.onlineFlag = '20'
      putAction(this.url.edit, row).then(res => {
        if (res.success) {
          this.$message.success('下架成功')
          this.loadData()
        }
      })
    }
  }
}
</script>
